<template>
    <div class="test-paper-increase">
        <!-- 新增弹窗 -->
        <a-modal
         class="test-paper-modal"
         :visible="visibleShow" 
         :title="addEditParameter.id?'编辑':'新增'" 
         @ok="visibleShow = false" 
         :maskClosable="false"
         cancelText=""
         :centered="true"
         :closable="false"
         width="100%"
         wrapClassName="full-modal"
         >
            <a-spin size="large" :spinning="spinning" :key="spinningKey">
                <div style="margin-bottom: 20px;">
                    <a-button class="blue-btn" type="primary" @click="returnClick()">返回</a-button>
                    <a-button style="margin-left: 10px;" class="blue-btn" type="primary" @click="refreshClick()">刷新</a-button>
                    <a-button style="margin-left: 15px;" :loading="!visibleShow || confirmLoading" class="blue-btn" type="primary" @click="saveMainTable">保存</a-button>
                </div>
                <div >

                
                    <a-form v-if="visibleShow" :form="form" layout="inline">
                        <a-form-item label="试卷名称">
                            <a-input
                            placeholder="请输入试卷名称"
                            v-decorator="[
                                'fsjmc', { initialValue:formState.fsjmc, rules: rules.fsjmc}
                            ]"/>
                        </a-form-item>
                        <a-form-item label="试卷类型">
                            <a-input
                            placeholder="请输入试卷类型"
                            v-model:value="formState.fsjlx"
                             />
                        </a-form-item>
                        <a-form-item label="单选题大标题">
                            <a-input
                            placeholder="请输入单选题大标题"
                            v-model:value="formState.fdanxtdbt" />
                        </a-form-item>
                        <a-form-item label="多选题大标题">
                            <a-input
                            placeholder="请输入多选题大标题"
                            v-model:value="formState.fduoxtdbt" />
                        </a-form-item>
                        <a-form-item label="判断题大标题">
                            <a-input
                            placeholder="请输入判断题大标题"
                            v-model:value="formState.fpandtdbt" />
                        </a-form-item>
                        <a-form-item label="主观题大标题">
                            <a-input
                            placeholder="请输入主观题大标题"
                            v-model:value="formState.fzhugtdbt" />
                        </a-form-item>
                    </a-form>
                    <div style="border-top: 1px solid rgb(92, 163, 229); margin: 15px 0;"/>
                    <!-- 题目 -->
                    <topicPage ref="refTopicPage" :isAddATopic="isAddATopic" :cuerrfsjid="cuerrfsjid"/>
                    <!-- :formState="formState" @triggerValidateForm="saveMainTable" -->
                </div>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import {typeInput, typeNumber, typeSelect, typeCheckbox, typeRadio} from '@/components/compSearchCriteria/ContractType'
import compSelector from '@/components/compSelector/compSelector'
import validator from '@/common/validator'
import {addServe, editServe} from './service/index'
import topicPage from './topicPage'
export default {
    components:{
        compSelector,
        topicPage
    },
    props:{
        addEditParameter:{
            type:Object,
            default:[]
        },
        fsjid:{
            type:String,
            default:'',
            require:false
        }
    },
    data(){
        return{
            spinningKey:null,
            spinning:true,
            form: this.$form.createForm(this, { name: 'coordinated' }),
            visibleShow:false,
            confirmLoading:false,
            typeSelect:typeSelect,
            formState:{},
            rules:{
                fsjmc: [{
                    required: true,
                    message: '请输入试卷名称',
                    trigger: 'blur',
                }],
                fsjlx: [{
                    required: true,
                    message: '请输入试卷类型',
                    trigger: 'blur',
                }]
            },
            formRequer:'',
            optionsArr:[],
            submittedSuccessfully:false,
            isAddATopic:false,//是否可以添加题目
            cuerrfsjid:''
        }
    },
    watch:{
        addEditParameter(newval,oldVal){
            this.assignment(newval)
        },
        fsjid(newval,oldVal){
            //console.log('获取到试卷id了吗===========',newval)
            this.cuerrfsjid = newval
        }
    },
    mounted(){
        
    },
    updated(){
        this.cancelLoading()
        this.$refs.refTopicPage.getTopicPageData({isAddATopic:this.isAddATopic,cuerrfsjid:this.cuerrfsjid})
    },
    methods:{
        cancelLoading(){
            let timer = setInterval((val)=>{
                this.spinning = false
                clearInterval(timer);
            },500)
            
        },
        getData(val){
            this.addEditParameter = val
            this.assignment(val)
        },
        assignment(newval){
            this.spinning = true
            this.formState = {
                ...this.formState,
                ...newval,
                fsjmc:newval.fsjmc?newval.fsjmc:'',
                fsjlx:newval.fsjlx?newval.fsjlx:'',
            }
            if(newval.id){
                
                this.isAddATopic = true
                this.formState.id = newval.id
                this.cuerrfsjid = newval.id
            }else{
                this.formState.id = ''
                this.isAddATopic = false
                this.cuerrfsjid = ''
            }
            //console.log('8888888888',this.formState)
        },
        //保存主表
        saveMainTable(e) {
            // e.preventDefault();
            var formState = {}
            this.form.validateFields((err, values) => {
                if (!err) {
                    this.confirmLoading = true
                    formState = {
                        ...this.formState,
                        ...values
                    }
                    if(this.cuerrfsjid){
                        formState.id = this.cuerrfsjid
                    }
                    //console.log('formState.id',formState.id)
                    if(formState.id){
                        editServe(formState).then(res=>{
                            if(res.code == 200){
                                this.$message.success('保存成功')
                                this.confirmLoading = false
                                this.isAddATopic = true
                            }else{
                                this.$message.warning(res.message)
                                this.confirmLoading = false
                            }
                        }).catch(err =>{
                            this.confirmLoading = false
                        })
                    }else{
                        addServe(formState).then(res=>{
                            if(res.code == 200){
                                this.cuerrfsjid = res.result.id
                                this.$refs.refTopicPage.currentRenovate()
                                this.$message.success('保存成功')
                                this.confirmLoading = false
                                this.isAddATopic = true
                            }else{
                                this.$message.warning(res.message)
                                this.confirmLoading = false
                            }
                        }).catch(err =>{
                            this.confirmLoading = false
                        })
                    }
                    
                }
            });
            
        },
        returnClick(){
            this.visibleShow = false
            this.$emit('handleOk',true,1)
            // this.handleSubmit()
        },
        refreshClick(){
            this.spinning = true
            this.spinningKey = Date.now()
            this.cancelLoading()
        },

    }

}

</script>
<style lang="less">
/* .ant-form-item-label{
    font-weight: 600;
} */

 .ant-modal-title{
    font-weight: 600;
 }
 .ant-modal-header{
    background: #5ca3e5;
 }
 .ant-upload-list{
    display: none !important;
 }
 .ant-modal-footer .ant-btn-primary{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
 }
 .test-paper-modal .ant-modal-header{
    display: none !important;
 }
 .test-paper-modal .ant-modal-footer{
    display: none !important;
 }
 .test-paper-modal .ant-modal-content{
    height: 100vh;
    overflow: auto;
 }
 .full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>